<script setup >
import Button from './Button_lxw.vue';
import FileInput from './FileInput.vue';
import { ref, watch } from 'vue';
import place_img from '../assets/images/student/avatar_modification.png'

const props = defineProps(['confirmFunction', 'confirmParams', 'cancelFunction', 'cancelParams']);

const img_file = ref(null);
const img_ref = ref(null);

function confirm() {
    if (props.confirmFunction == undefined) {
        return;
    }
    props.confirmParams === undefined ? props.confirmFunction.call({img_file}) : props.confirmFunction.call({img_file}, props.confirmParams);
}

function cancel() {
    if (props.cancelFunction === undefined) {
        return;
    }
    props.cancelParams === undefined ? props.cancelFunction.call() : props.cancelFunction.call(null, props.cancelParams);
}

watch(img_file, (filelist) => {
    const url = URL.createObjectURL(filelist[0]);
    img_ref.value.src = url
    img_ref.value.onload = () => {
        URL.revokeObjectURL(url);
    }
})

</script>
<template>
    <div class="avatar-form">
        <div class="title">更换头像</div>
        <div class="avatar">
            <img ref="img_ref" :src="place_img" />
        </div>
        <FileInput v-model:file="img_file" accept="image/png, image/jpeg" />
        <div class="buttons">
            <Button class="confirm" :style="{ margin: '0 15px' }" @click="confirm">确定</Button>
            <Button class="cancel" :style="{ margin: '0 15px' }" @click="cancel">取消</Button>
        </div>
    </div>
</template>
<style scoped > 
.title {
     font-size: 20px;
     margin: 15px auto;
     text-align: center;
     padding: 10px 0;
     border-bottom: 1px solid #C0C4CC;
 }

 .avatar {
     width: 140px;
     height: 140px;
     display: flex;
     border: 1px solid #909399;
     border-radius: 10px;
     margin: 10px auto;
     justify-content: center;
     align-items: center;
 }

 .avatar>img {
     width: 128px;
 }

 .buttons {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 15px auto;
 }

 .confirm {
     width: 120px !important;
     border: none !important;
     background-color: #8493a6 !important;
     color: #FFFFFF !important;
 }

 .cancel {
     width: 120px !important;
     border: none !important;
     background-color: #939393 !important;
     color: #FFFFFF !important;
 }
</style>